<template>
  <view :class="classes"><slot /></view>
</template>

<script setup>
import { computed } from 'vue'

/**
 * TDesign Tag 精简版
 * - theme: 'warning' | 'default'
 * - variant: 'light' | 'outline' | 'solid'
 * - size: 'small' | 'medium'
 */
const props = defineProps({
  theme: { type: String, default: 'default' },
  variant: { type: String, default: 'light' },
  size: { type: String, default: 'medium' }
})

/**
 * 组合类名
 */
const classes = computed(() => `t-tag t-tag--${props.theme} t-tag--${props.variant} t-tag--${props.size}`)
</script>

<style>
.t-tag {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  line-height: 1.2;
}
.t-tag--warning.t-tag--light {
  background-color: rgba(245, 166, 35, 0.15);
  color: var(--td-brand-color, #f5a623);
}
.t-tag--warning.t-tag--solid {
  background-color: var(--td-brand-color, #f5a623);
  color: #fff;
}
.t-tag--outline {
  border: 1rpx solid var(--td-brand-color, #f5a623);
  color: var(--td-brand-color, #f5a623);
}
.t-tag--small { font-size: 22rpx; }
.t-tag--medium { font-size: 24rpx; }
</style>

